import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  Button,
  View
} from 'react-native';

export default class HelloWorld extends React.Component {
  state = { isHungry: true, text: "" };


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>第一个页面,</Text>

        <View style = {{backgroundColor:'#662288', height:50, justifyContent:'center'}}>
          <Button
            color={'#ffffff'}
            onPress={() => {
              //this.setState({ isHungry: false });
              //enter page2
              this.props.navigation.navigate('BeautifulPage')
            }}
            disabled={!this.state.isHungry}
            title="进入漂亮的第一个页面"
          />
        </View>

        <Text style={{ padding: 10, fontSize: 42 }}>
          {this.state.text.split(' ')}
        </Text>

      </View>

    );
  }
}

class Cat extends React.Component {
  render() {
    return (<Text>Hello, I am your cat, my name is {this.props.name}!</Text>);
  }
}

const Dog = (n) => {
  return (
    <>
      <Text>Hello, I am your dog! {n.name}</Text>
      <Text>=========={getFullName("11", "22", "33")}</Text>
    </>
  );
}

const Fish = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'column',
    justifyContent: 'flex-start'
  },
  hello: {
    fontSize: 20,
    textAlign: 'left',
    margin: 10
  },
  clickButtonStyle: {
    margin: 10,

    height: 40,

    backgroundColor: '#FF0000',

    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#7FFF00',
  }
});